<template>
  <div class="container">
    <card class="card-item" cardName="密码修改" cardWidth="100%" :scalable="false">
      <div slot="content" class="content">
        <el-form ref="form" :model="form" label-width="80px">
          <div class="message-box">
            <h3>当前用户：{{form.username}}</h3>
          </div>
          <div class="message-box">
            <h3>原密码</h3>
          </div>
          <el-input
            type="password"
            v-model="form.oldPassword"
            class="input-oldPassword"
            maxlength="20"></el-input>
          <div class="message-box">
            <h3>新密码</h3>
          </div>
          <el-input
            type="password"
            v-model="form.newPassword"
            class="input-newPassword"
            maxlength="20"></el-input>
          <div class="message-box">
            <h3>确认密码</h3>
          </div>
          <el-input
            type="password"
            v-model="form.confirmPassword"
            class="input-newPassword"
            maxlength="20"></el-input>
        </el-form>
        <div class="button-box">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="changePassword">确定</el-button>
        </div>
      </div>
    </card>

  </div>
</template>

<script>
  //fa422eb559f0021399133f945d2143fd
  import card from 'components/common/card/Card'

  import {changePassword} from "../../network/viewsRequest/user";

  export default {
    name: "ChangePassword",
    data() {
      return {
        form: {
          username: this.$store.state.currentUser.username,
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
        }
      }
    },
    components: {
      card
    },
    methods: {
      changePassword() {
        // 进行输入校验
        if (!this.checkInput()) {
          return false;
        }
        // 进行修改
        this.$confirm("是否要确定修改？", "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          changePassword(this.form).then(res => {
            if (res.code == 1) {
              this.$message.success("密码修改成功，请重新登录");
              this.$store.commit("clearCurrentUser");
              this.$router.push("/login");
            } else {
              this.$message.error(res.message);
            }
          })
        }).catch(() => {
          this.$message.info("修改密码操作已经被取消");
        })

      },
      checkInput() {
        let oldPassword = this.form.oldPassword;
        let newPassword = this.form.newPassword;
        let confirmPassword = this.form.confirmPassword;

        if (oldPassword == null || oldPassword == '') {
          this.$message.error("原密码不能为空");
          return false;
        }

        if (oldPassword.length < 6) {
          this.$message.error("原密码长度必须在6~20位之间");
          return false;
        }

        if (newPassword == null || newPassword == '') {
          this.$message.error("新密码不能为空");
          return false;
        }

        if (newPassword.length < 6) {
          this.$message.error("新密码长度必须在6~20位之间");
          return false;
        }

        if (confirmPassword == null || confirmPassword == '') {
          this.$message.error("确认密码不能为空");
          return false;
        }

        if (confirmPassword != oldPassword) {
          this.$message.error("两次密码输入不一致");
          return false;
        }

        if (newPassword == oldPassword) {
          this.$message.error("新密码不能与原密码相同");
          return false;
        }

        return true;
      },

    }
  }
</script>

<style scoped>
  .container {
    width: 70%;
    margin: 100px auto;
  }
  .card-item {
    marign: 0 atuo
  }
  .content {
    padding: 0px 20px 10px 20px;
  }
  h3 {
    margin-top: 30px;
    margin-bottom: 10px;

  }
  .message-box:first-child>h3 {
    margin-top: 0px;
  }
  .button-box {
    margin-top: 20px;
    text-align: right;
  }
</style>